<template>
  <div>
    <div class="box">
      <div class="box0 box1"></div>
      <div class="box0 box2"></div>
      <div class="box0 box3"></div>
      <div class="box0 box4"></div>
      <div id="level" style="width: 30rem; height: 15rem" ref="level"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "MyVueEcharts4",

  data() {
    return {};
  },

  mounted() {
    let level = echarts.init(this.$refs.level);
    let myColor = ["#1089e7", "#f57474", "#56d0e3", "#fee0b3", "#8570f8"];
    let option = {
      // 标题
      title: {
        text: "主要疫情国家治愈率",
        //   文字居中
        left: "center",
        //   标题颜色
        textStyle: {
          color: "#ffffff",
// 字体大小
          fontSize: 12,
          fontStyle: 100,
        },
      },
      xAxis: {
        // 数值轴
        type: "value",
        //   是否显示
        show: false,
      },
      yAxis: {
        // 类目轴
        type: "category",
        data: [" 美国", " 西班牙", "哥伦比亚", "英国", "意大利"],
        //   是否显示
        axisLine: {
          show: false,
        },
        //   刻度不显示
        axisTick: {
          show: false,
        },

        inverse: true,
        axisLabel: {
          color: "#ffffff",
        },
      },
      // 网格
      grid: {
        left: 80,
        bottom: 25,
      },
      // 系列
      series: [
        {
          // 柱状图
          type: "bar",
          data: [" 77.7", " 88.1", "92.6", "10", "13.3"],
          // 圆角
          itemStyle: {
            borderRadius: 30,
            color: new echarts.graphic.LinearGradient(
    0, 0, 1, 0,
    [
      { offset: 0, color: '#8a2be2' },  // 0% 处的颜色
      { offset: 1, color: '#00bfff' }   // 100% 处的颜色
    ]
  ),
          },
          // 柱状图宽度
          barWidth: 17,
          // 柱间距离
          barGap: "-100%",
          // 标签样式
          label: {
            show: true,
            formatter: "",
            color:'#ffffff'
          },

       
        },
        {
          type: "bar",
          data: ["100", "100", "100", "100", "100"],
          itemStyle: {
            borderRadius: 10,
            color: "none",
            borderWidth: 1,
            borderColor: "#00c3df",
          },
          barWidth: 17,
        },
      ],
    };
    level.setOption(option);
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
.box {
  width: 31.25rem;
  height: 15.9375rem;
  border: .0625rem solid #06275b;
  position: relative;
  background-color: rgba(1, 11, 56, 0.1);
  .box0 {
    width: .625rem;
    height: .625rem;
  }
  .box1 {
    border-top: .0625rem solid #02a4b4;
    border-left: .0625rem solid #02a4b4;
  }
  .box2 {
    border-top: .0625rem solid #02a4b4;
    border-right: .0625rem solid #02a4b4;
    position: absolute;
    right: 0;
    top: 0;
  }
  .box3 {
    border-bottom: .0625rem solid #02a4b4;
    border-left: .0625rem solid #02a4b4;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .box4 {
    border-bottom: .0625rem solid #02a4b4;
    border-right: .0625rem solid #02a4b4;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
</style>